<template>
    <!-- 学生测试 -->
    <div class="class-mg">
        <!-- 创建班级头部 -->
        <div class="up-material">
        </div>

        <!-- 文件下载表格 -->
        <div class="table">
            <span>我的测试：</span>
            <el-table :data="StudentExamData" style="width: 100%;border-radius: 10px;">
                <el-table-column prop="title" label="试卷名" ></el-table-column>
                <el-table-column prop="fullMarl" label="满分" width="80"></el-table-column>
                <el-table-column prop="starTime" label="开始时间" width="180"></el-table-column>
                <el-table-column prop="outTime" label="结束时间" width="180"></el-table-column>
                <el-table-column prop="timeLimit" label="限时" width="120"></el-table-column>
                <el-table-column label="考试状态" width="100" #default="data">
                    <!-- 进入考场快捷键 -->
                    <button @click="onshowModal(data.row.answerSheetId)">进入考试</button>
                    <div v-if="data.row.examStore == '未开始'">
                        <el-tooltip effect="light" content="未开始" placement="left">
                            <img style="margin-left: 20px;" src="/src/assets/svg/hourglass.svg" class="i-img">
                        </el-tooltip>
                    </div>
                    <div v-else-if="data.row.examStore == '已过期'">
                        <el-tooltip effect="light" content="已过期" placement="left">
                            <img style="margin-left: 20px;" src="/src/assets/svg/alarm-clock.svg" class="i-img">
                        </el-tooltip>
                    </div>
                    <div v-else>
                        <el-tooltip effect="light" content="开始考试" placement="left">
                            <img style="margin-left: 20px;" src="/src/assets/book-open.svg" class="i-img"
                                @click="onshowModal(data.row.answerSheetId)">
                        </el-tooltip>

                    </div>
                </el-table-column>
            </el-table>
        </div>
    </div>

    <!-- 确认进入考试弹窗 -->
    <n-modal v-model:show="showModal"  :mask-closable="false">
        <n-card style="width: 400px;height: 300px;" title=" " role="dialog" aria-modal="true">
            <!-- 关闭框 -->
            <template #header-extra>
                <img src="/src/assets/svg/delete.svg" class="deleye-img" @click="showModal = false">
            </template>
            <div style="display: flex;flex-direction: column;">
                <span style="text-align: center;font-size: 20px;margin-bottom: 10px;">考试注意事项</span>
                <span>1. 考试前请确保当前考试环境网络通畅。</span>
                <span>2. 考试时间截止后，将自动提交试卷</span>
            </div>
            <!-- 提交按钮 -->
            <template #footer>
                <div style="display: flex;justify-content: flex-end;">
                    <n-button @click="onEnterExam()">进入考试</n-button>
                </div>
            </template>
        </n-card>
    </n-modal>

</template>

<script setup>

import { computed, onMounted, ref } from 'vue';
import { StarFilled } from "@element-plus/icons-vue";
import { Star } from "@element-plus/icons-vue";
import { downloadMaterial, upMaterial } from '@/api/filesHttp';
import { openInfo } from '@/utils/openInfo';
import useUserStore from '@/stores/useUserStore';
import teacherHttp from '@/api/teacherHttp';
import studentHttp from '@/api/studentHttp';
import timeUtils from '@/utils/timeUtils';
import { useRouter } from 'vue-router';
const userStore = useUserStore()
const Router = useRouter()
//学习资料数据库 主键id  class_id所属于班级 资料名称 资料存储地址 上传资料的老师 上传时间
// 显示弹窗
const showModal = ref(false)

onMounted(() => {
    //初始化数据
    getStudentExam()
})

//学生还没有考试的试卷
const StudentExamData = ref([])
//获取文件列表数据 没有加入班级就会返回请先加入班级
function getStudentExam() {
    studentHttp.getStudentExam(userStore.userInfo.userId).then((res) => {
        console.log(res);
        StudentExamData.value = res.data
        //对数据格式做一定处理
        for (let i = 0; i < StudentExamData.value.length; i++) {
            StudentExamData.value[i].timeLimit = timeUtils.HMS(StudentExamData.value[i].timeLimit)
            StudentExamData.value[i].starTime = StudentExamData.value[i].starTime.replace("T", " ")
            StudentExamData.value[i].outTime = StudentExamData.value[i].outTime.replace("T", " ")
        }
    })
}
//当前弹窗选中的试卷的id
const answerSheetId = ref(null)
//点击开始考试触发的函数
function onshowModal(Id) {
    answerSheetId.value = Id
    showModal.value = true
}

//进入考试
function onEnterExam(){
    //路由跳转 携带考试的答卷id跳转 让学生能在考试页面得到试题的数据
    console.log("开始考试");
    Router.push({name:"Exam",params:{answerSheetId:answerSheetId.value}})
    
}
</script>

<style scoped>
/* 最大的盒子 */
.class-mg {
    background-color: rgb(182, 174, 174, 0.1);
    display: flex;
    flex-direction: column;
    height: 900px;
    border-radius: 10px;
}

/* 创建班级和发送通知 */
.up-material {
    margin: 10px;
    height: 50px;
    background-color: rgb(182, 174, 174, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
}

/* 关闭弹窗键 */
.i-img {
    transition: transform 0.3s ease;
    cursor: pointer;
}

.i-img:hover {
    transform: scale(1.2);
}


.table {
    border-radius: 10px;
    padding: 20px;

}

/* 关闭弹窗键 */
.deleye-img {
  transition: transform 0.3s ease;
  cursor: pointer;
}

.deleye-img:hover {
  transform: scale(1.2);
}
</style>